<template>
  <div class="merchant-wrapper" style="background-color: #f5f7fb; padding: 20px 0;">
    <div class="merchant-container" ref="scrollContainer">
      <div class="hexagon-container" ref="scrollContent">
        <div class="hexagon-item" v-for="(item, index) in merchantLogos" :key="index">
          <div class="hexagon">
            <div class="hexagon-inner">
              <div class="logo-text">
                <img :src="baseUrl+item.logoUrl" :alt="item.website" class="merchant-logo"/>
              </div>
            </div>
          </div>
        </div>
        <!-- 复制一份用于无缝滚动 -->
        <div class="hexagon-item" v-for="(item, index) in merchantLogos" :key="index+'copy'">
          <div class="hexagon">
            <div class="hexagon-inner">
              <div class="logo-text">
                <img :src="baseUrl+item.logoUrl" :alt="item.website" class="merchant-logo"/>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script >
export default {
  props: {
    merchantLogos: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    baseUrl() {
      return process.env.VUE_APP_BASE_API
    }
  },
  mounted() {
    this.$nextTick(() => {
      if (this.merchantLogos.length > 0) {
        this.startAutoScroll();
      }
    });

    // 当商家数据加载完成后也启动滚动
    this.$watch('merchantLogos', (newVal) => {
      if (newVal.length > 0) {
        this.$nextTick(() => {
          this.startAutoScroll();
        });
      }
    }, { immediate: true });
  },
  beforeDestroy() {
    this.stopAutoScroll();
  },
  methods: {
    startAutoScroll() {
      const container = this.$refs.scrollContainer;
      const content = this.$refs.scrollContent;

      if (!container || !content) return;

      // 重置位置
      content.style.transform = 'translateX(0)';

      // 获取内容宽度
      const contentWidth = content.scrollWidth / 2; // 因为我们复制了一份

      // 动画函数
      const animate = () => {
        const currentPosition = parseInt(content.style.transform.replace('translateX(', '').replace('px)', '')) || 0;

        if (Math.abs(currentPosition) >= contentWidth) {
          // 当滚动到复制内容的一半时，重置位置
          content.style.transform = 'translateX(0)';
        } else {
          // 继续向左滚动
          content.style.transform = `translateX(${currentPosition - 1}px)`;
        }

        this.animationId = requestAnimationFrame(animate);
      };

      // 开始动画
      this.animationId = requestAnimationFrame(animate);
    },

    stopAutoScroll() {
      if (this.animationId) {
        cancelAnimationFrame(this.animationId);
      }
    },
  }
}
</script>


<style scoped lang="scss">
/* 修改商家列表样式 */
.merchant-wrapper {
  margin-top: 80px;
  padding: 60px 0;
  background-color: #f5f7fb;
  overflow: hidden;
  position: relative;
  user-select: none;
}

.merchant-container {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.hexagon-container {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 20px 0;
  gap: 10px;
  will-change: transform; /* 优化性能 */
  white-space: nowrap; /* 防止换行 */
}

.hexagon-item {
  flex-shrink: 0;
  transition: all 0.4s ease;
  margin: 0 5px;
}

.hexagon {
  position: relative;
  width: 260px;
  height: 100px;
  background-color: #fff;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  clip-path: polygon(
      25% 0%,
      75% 0%,
      100% 50%,
      75% 100%,
      25% 100%,
      0% 50%
  );
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
}

.hexagon-inner {
  width: 170px;
  height: 190px;
  clip-path: polygon(
      25% 0%,
      75% 0%,
      100% 50%,
      75% 100%,
      25% 100%,
      0% 50%
  );
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
}

.merchant-logo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: all 0.4s ease;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .merchant-wrapper {
    margin-top: 40px;
    padding: 30px 0;
  }

  .hexagon-container {
    gap: 5px; /* 减小间距 */
  }

  .hexagon-item {
    margin: 0 2px; /* 减小间距 */
  }

  .hexagon {
    width: 120px;
    height: 80px;
  }

  .hexagon-inner {
    width: 100px;
    height: 110px;
    padding: 10px;
  }
}

@media (max-width: 480px) {
  .merchant-wrapper {
    margin-top: 30px;
    padding: 20px 0;
  }

  .hexagon-container {
    gap: 3px; /* 进一步减小间距 */
  }

  .hexagon-item {
    margin: 0 1px; /* 进一步减小间距 */
  }

  .hexagon {
    width: 100px;
    height: 60px;
  }

  .hexagon-inner {
    width: 80px;
    height: 90px;
    padding: 8px;
  }
}
</style>
